import BaseLayout from '@/layouts/BaseLayout/BaseLayout'
import Case1 from './Case1';
import Case2 from './Case2';
import Case3 from './Case3';
import Case4 from './Case4';
import Case5 from './Case5';

function Demo() {
	return (
		<BaseLayout>
		    <h2 className="intro-title">Rate 评分</h2>
		    <p className="intro-content">评分组件。</p>
			
			<h3 className="show-case-title">代码演示</h3>
			
			{/*演示*/}
			<Case1></Case1>
			<Case2></Case2>
			<Case3></Case3>
			<Case4></Case4>
			<Case5></Case5>

		    {/*介绍*/}
			<h3 className="base-title">API</h3>
			<table className="attri-table">
				<thead>
					<tr>
						<th>参数</th>
						<th>说明</th>
						<th>类型</th>
						<th>默认值</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>className</td>
						<td>分割线样式类</td>
						<td>string</td>
						<td>--</td>
					</tr>
					<tr>
						<td>character</td>
						<td>自定义字符</td>
						<td>string</td>
						<td>★</td>
					</tr>
					<tr>
						<td>count</td>
						<td>star 总数</td>
						<td>number</td>
						<td>5</td>
					</tr>
					<tr>
						<td>defaultValue</td>
						<td>默认值</td>
						<td>number</td>
						<td>0</td>
					</tr>
					<tr>
						<td>disabled</td>
						<td>只读，无法进行交互</td>
						<td>boolean</td>
						<td>false</td>
					</tr>
					<tr>
						<td>value</td>
						<td>当前数，受控值</td>
						<td>number</td>
						<td>--</td>
					</tr>
					<tr>
						<td>allowClear</td>
						<td>是否允许再次点击后清除</td>
						<td>boolean</td>
						<td>true</td>
					</tr>
					<tr>
						<td>tooltips</td>
						<td>自定义每项的提示信息</td>
						<td>string[]</td>
						<td>--</td>
					</tr>
					<tr>
						<td>onBlur</td>
						<td>失去焦点时的回调</td>
						<td>function()</td>
						<td>--</td>
					</tr>
					<tr>
						<td>onChange</td>
						<td>选择时的回调</td>
						<td>function(value: number)</td>
						<td>--</td>
					</tr>
					<tr>
						<td>onFocus</td>
						<td>获取焦点时的回调</td>
						<td>function()</td>
						<td>--</td>
					</tr>
					<tr>
						<td>onHoverChange</td>
						<td>鼠标经过时数值变化的回调</td>
						<td>function(value: number)</td>
						<td>--</td>
					</tr>
					<tr>
						<td>onKeyDown</td>
						<td>按键回调</td>
						<td>function(event)</td>
						<td>--</td>
					</tr>
				</tbody>
			</table>
		</BaseLayout>
	)
}

export default Demo
